<!--印章管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">印章管理</span>
    <el-button type="primary" @click="saveDialogTitle"
               style="float:right;margin-top:10px;">新建印章</el-button>
  </div>
  <!-- 新建印章弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="负责人">
            <el-select placeholder="请选择" v-model="stampSaveForm.manageId">
              <el-option v-for="item in userOption" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门">
            <el-select placeholder="请选择" v-model="stampSaveForm.deptId">
              <el-option v-for="item in deptOption" :label="item.deptName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="印章名" >
            <el-input placeholder="请输入印章名" v-model="stampSaveForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="印章数" >
            <el-input placeholder="请输入印章数" v-model="stampSaveForm.num"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="印章状态" >
            <el-select placeholder="请选择" v-model="stampSaveForm.status">
              <el-option label="正常" value=1></el-option>
              <el-option label="封存" value=2></el-option>
              <el-option label="作废" value=3></el-option>
              <el-option label="遗失" value=4></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="印章类型" >
            <el-select placeholder="请选择" v-model="stampSaveForm.type">
              <el-option label="公章" value=1></el-option>
              <el-option label="员工章" value=2></el-option>
              <el-option label="部门章" value=3></el-option>
              <el-option label="财务章" value=4></el-option>
              <el-option label="合同章" value=5></el-option>
              <el-option label="法人章" value=6></el-option>
              <el-option label="发票章" value=7></el-option>
              <el-option label="其它章" value=8></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="印章用途">
            <el-input placeholder="请输入内容" v-model="stampSaveForm.function"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="其它备注">
            <el-input placeholder="请输入内容" v-model="stampSaveForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="展示图片(1张)">
            <el-upload
                v-model:file-list="fileList"
                v-model:action="actionUrl"
                name="file"
                limit="1"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
            >
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
            <el-dialog v-model="imgDiaVisible">
              <img w-full :src="dialogImageUrl"/>
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>
      <!--   创建人用全局user传参   -->
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveStamp">确定</el-button>
    </template>
  </el-dialog>
  <!--印章搜索卡片-->
  <el-card style="margin: 20px 20px 0 20px;height: 70px">
    <el-form :inline="true">
      <el-form-item label="负责人" style="width: 200px;" @keydown.enter="loadStamp">
<!--        <el-input placeholder="请输入负责人id" v-model="searchStampForm.manageId"></el-input>-->
        <el-select placeholder="请选择" v-model="searchStampForm.manageId">
          <el-option v-for="item in userOption" :label="item.username" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="印章名" style="width: 220px;" @keydown.enter="loadStamp">
        <el-input placeholder="请输入印章名" v-model="searchStampForm.name"></el-input>
      </el-form-item>
      <el-form-item label="印章状态" style="width: 170px;">
        <el-select placeholder="请选择" v-model="searchStampForm.status" >
          <el-option label="正常" value=1></el-option>
          <el-option label="封存" value=2></el-option>
          <el-option label="作废" value=3></el-option>
          <el-option label="遗失" value=4></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="印章类型" style="width: 170px;" >
        <el-select placeholder="请选择" v-model="searchStampForm.type">
          <el-option label="公章" value=1></el-option>
          <el-option label="员工章" value=2></el-option>
          <el-option label="部门章" value=3></el-option>
          <el-option label="财务章" value=4></el-option>
          <el-option label="合同章" value=5></el-option>
          <el-option label="法人章" value=6></el-option>
          <el-option label="发票章" value=7></el-option>
          <el-option label="其它章" value=8></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadStamp">查询</el-button>
        <el-button type="warning" @click="printStamp">导出</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 印章列表 -->
  <el-card style="margin:20px;">
    <el-table :data="StampTableDate">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="manageId" label="负责人"  :formatter="userFormatter" align="center"/>
      <el-table-column prop="deptId" label="负责部门"  :formatter="deptFormatter" align="center"/>
      <el-table-column prop="name" label="印章名"  align="center"/>
      <el-table-column prop="status" label="印章状态"  align="center"
                       :formatter="statusFormatter"/>
      <el-table-column prop="type" label="印章类型"  align="center"
                       :formatter="typeFormatter"/>
      <el-table-column prop="num" label="印章数"  align="center"/>
      <el-table-column
          label="图片预览"
          width="140"
          align="center">
        <template #default="scope">
          <img :src="BASE_URL+scope.row.imgUrl" style="width: 100%;height: 100%">
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editStamp(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteStamp(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
// import axios from "axios";
import axios from "@/util/request";
import qs from "qs";
import {ElMessage} from "element-plus";

const dialogTitle = ref('新建印章');
const dialogVisible = ref(false);
const searchStampForm = ref({});
const StampTableDate = ref([]);
const stampSaveForm = ref({});
const userOption = ref([]);
const deptOption = ref([]);

//网关
const gateway = '/system_api';

// 搜素+展示列表
const loadStamp = () => {
  let data = qs.stringify(searchStampForm.value);
  console.log(data)
  axios.get(gateway+'/oa/stamp/select?'+data).then((response)=>{
    if(response.data.code == 2000){
      StampTableDate.value = response.data.data;
    }
  })
}

const resetSearch = () =>{
  searchStampForm.value = {};
  loadStamp();
}

onMounted(()=>{
  loadStamp();
  loadUser(userOption);
  loadDept(deptOption);

})

//导出
const printStamp = () => {
  let data = qs.stringify(searchStampForm.value);
  console.log(data)
  axios.get(gateway+'/oa/stamp/print?'+data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success("导出成功!")
    }
  })
}


const statusFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 1){
    cellValue = '正常';
  }else if(cellValue == 2){
    cellValue = '封存';
  }else if(cellValue == 3){
    cellValue = '作废';
  }else if(cellValue == 4){
    cellValue = '遗失';
  }
  return cellValue;
}

const typeFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 1){
    cellValue = '公章';
  }else if(cellValue == 2){
    cellValue = '员工章';
  }else if(cellValue == 3){
    cellValue = '部门章';
  }else if(cellValue == 4){
    cellValue = '财务章';
  }else if(cellValue == 5){
    cellValue = '合同章';
  }else if(cellValue == 6){
    cellValue = '法人章';
  }else if(cellValue == 7){
    cellValue = '发票章';
  }else if(cellValue == 8){
    cellValue = '其它章';
  }
  return cellValue;
}

const userFormatter = (row,column,cellValue,index) =>{
  if(!userOption.value){
    return cellValue;
  }
  for (let item of userOption.value) {
    if (item.id == cellValue){
      cellValue = item.username;
    }
  }
  return cellValue;
}
const deptFormatter = (row,column,cellValue,index) =>{
  if(!deptOption.value){
    return cellValue;
  }
  for (let item of deptOption.value) {
    if (item.id == cellValue){
      cellValue = item.deptName;
    }
  }
  return cellValue;
}

/**图片上传相关代码开始**/
const fileList = ref([]);
const dialogImageUrl = ref('');
const imgDiaVisible = ref(false);
//定义变量用来保存图片上传给哪个后端接口地址
const actionUrl = ref(BASE_URL + '/v1/file/upload');
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(gateway+'/v1/file/remove?imgUrl=' + imgUrl)
      .then((response) => {
        if (response.data.code == 2000) {
          ElMessage.success("删除成功!")
        }
      })
}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  imgDiaVisible.value = true;
  console.log(uploadFile);
  //console.log(fileList.value[0].response.data);
}
/**图片上传相关代码结束**/

//新增 + 编辑
const saveDialogTitle = () => {
  dialogVisible.value = true;
}

const saveStamp = () => {
  stampSaveForm.value.imgUrl = fileList.value[0].response.data;
  let data = qs.stringify(stampSaveForm.value);
  axios.post(gateway+'/oa/stamp/insert',data).then((response)=>{
    if(response.data.code == 2000){
      ElMessage.success("新增成功!")
      loadStamp();
      dialogVisible.value = false;
      stampSaveForm.value = {};
    }
  })
}

const editStamp = (id) => {
  dialogVisible.value = true;
  dialogTitle.value = '编辑印章';
  axios.get(gateway+'/oa/stamp/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      stampSaveForm.value = response.data.data[0];
    }
  })
}

const handleClose = () => {
  if(confirm('确定要关闭本弹窗?')){
    loadStamp();
    dialogVisible.value = false;
    stampSaveForm.value = {};
  }
}

//删除
const deleteStamp = (id) => {
  if(confirm('确定要删除本印章?')){
    axios.post(gateway+'/oa/stamp/delete/'+id).then((response)=>{
      if(response.data.code == 2000){
        loadStamp();
        ElMessage.success("删除成功!")
      }
    })
  }
}
</script>

<style scoped>

</style>